<template>
  <page-header-wrapper>
     <a-card :bordered="false" class="card_top_padding no_need_padding" style="margin-bottom: 11px">
      <a-tabs @change="(val)=>{$router.push({name:val})}" activeKey="ShopVerifySetting">
        <a-tab-pane key="ShopList" tab="自提点"> </a-tab-pane>
        <a-tab-pane key="shopWithdraw" tab="提现"> </a-tab-pane>
        <a-tab-pane key="ShopVerifier" tab="核销员"> </a-tab-pane>
        <a-tab-pane key="ShopVerifySetting" tab="核销设置"> </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card :bordered="false">
      <div class="table-operator">
        <NoBorderRadio @onChange="onOptionChange" :options="options" :defaultValue="-2"></NoBorderRadio>
      </div>
      <a-divider />
      <a-form class="permission-form" :form="form" v-show="currentType == -2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="最少提现额度" extra="注：自提点最少提现额度">
          <a-input-number
            placeholder="最少提现额度"
            :formatter="(value) => `${value}元`"
            :parser="(value) => value.replace('元', '')"
            :min="0"
            :precision="2"
            :step="0.01"
            v-decorator="['shop_min_money', { initialValue: 0 }]"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="申请协议" extra="注：用户自提点申请协议">
          <a-textarea
            :rows="2"
            id="shop_agree_rules"
            v-decorator="['shop_agree_rules', { rules: [{ required: false, message: '请输入申请协议' }] }]"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit" @click="handleOk"> 提交 </a-button>
        </a-form-item>
      </a-form>
      <a-form class="permission-form" :form="form" v-show="currentType == -1">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="佣金类型" extra="注：核销员佣金类型">
          <a-radio-group
            v-decorator="[
              'shop_ratio_type',
              {
                initialValue: 1,
                getValueFromEvent: (e) => {
                  this.radio_type = e.target.value
                  return e.target.value
                },
              },
            ]"
          >
            <a-radio :value="1"> 百分比 </a-radio>
            <a-radio :value="2"> 固定金额 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="核销员佣金"
          extra="注：核销员佣金比例或者固定金额具体数"
        >
          <a-input-number
            placeholder="核销员佣金"
            :formatter="(value) => `${value}` + (radio_type == 1 ? '%' : '元')"
            :parser="(value) => value.replace(radio_type == 1 ? '%' : '元', '')"
            :min="0"
            :precision="2"
            :step="1"
            v-decorator="['shop_ratio', { initialValue: 0 }]"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit" @click="handleOk"> 提交 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import { STable } from '@/components'
import { shopSettingList, shopSettingEdit } from '@/api/shop'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

export default {
  name: 'ShopshopSetting',
  components: {
    STable,
    NoBorderRadio,
  },
  data() {
    return {
      currentType: -2,
      options: [
        {
          title: '基础设置',
          value: -2,
        },
        {
          title: '核销设置',
          value: -1,
        },
      ],
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      radio_type: 1,
      form: this.$form.createForm(this),
      setting_data: {},
    }
  },
  filters: {},
  created() {
    this.loadData()
  },
  methods: {
    onOptionChange(val) {
      this.currentType = val
    },
    changeTab(val) {
      if (val == 1) {
        this.$router.push({ name: 'ShopVerifier' })
      }
    },
    loadData() {
      shopSettingList({})
        .then((res) => {
          console.log('shopList', res)
          this.setting_data = res.data
          res.data.shop_ratio_type = parseInt(res.data.shop_ratio_type)
          this.radio_type = res.data.shop_ratio_type
          this.$nextTick(() => {
            this.form.setFieldsValue(
              pick(res.data, ['shop_min_money', 'shop_agree_rules', 'shop_ratio_type', 'shop_ratio'])
            )
          })
          return res.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          return false
        }
        this.modalLoading = true
        shopSettingEdit(values)
          .then((res) => {
            console.log(res)
            this.modalLoading = false
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success('保存成功！')
              this.loadData()
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.modalLoading = false
          })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
